<template>
	<div class="authorInfo">
		<!-- 主播信息 -->
		<div class="author">主播信息</div>
		<van-row>
			<van-col span="4" class="authorInfo1">
				<van-image round :src="imageUrl + uuserInfo?.userInfo.logo"></van-image>
				<div class="authorLevel">{{ uuserInfo?.userInfo.anchorGrade }}</div>
			</van-col>
			<van-col span="17" class="authorInfo2">
				<div class="authorName">{{ uuserInfo?.userInfo.nickname }}</div>
				<div class="authorIntro">
					{{ uuserInfo?.userInfo.personalSignature }}
				</div>
				<div class="subscribeCount">
					<van-icon name="friends-o" />
					<span>{{ uuserInfo?.statCountInfo.followerCount }}</span>
				</div>
			</van-col>
			<van-col span="3" class="authorInfo3">
				<van-icon name="contact" class="addSubscribe" size="24px" />
				<div class="addtext">加关注</div>
			</van-col>
		</van-row>
		<!-- 主播作品 -->
		<div class="works">
			<div
				class="work"
				v-for="item in userWorkList?.albumBriefDetailInfos"
				:key="item.id"
				@click="toDetail(item.id)">
				<van-image
					width="90px"
					height="90px"
					v-if="item.id"
					:src="imageUrl + item.albumInfo.cover"></van-image>
				<div class="wokrsInfo">
					<div>
						{{ item.albumInfo.title }}
					</div>
				</div>
				<div class="video">
					<van-icon name="play-circle-o" />
					<span>{{ item.statCountInfo.trackCount }}万</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import type { dataModel, userDataModel } from "@/api/CourseDetail";
	let imageUrl = "https://imagev2.xmcdn.com/";
	defineProps<{
		uuserInfo: dataModel | undefined;
		userWorkList: userDataModel | undefined;
	}>();
	let emit = defineEmits<{
		(e: "changeHead", id: number): void;
	}>();
	// 点击刷新详情页数据
	let toDetail = (uid: number) => {
		emit("changeHead", uid);
	};
</script>

<style scoped lang="less">
	// 主播信息
	.authorInfo {
		padding: 15px;
		margin: 10px 0;
		// 主播信息
		.author {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.authorInfo1 {
			position: relative;
			.authorLevel {
				background-color: skyblue;
				color: white;
				text-align: center;
				font-size: 12px;
				width: 28px;
				border-radius: 20px;
				position: absolute;
				top: 48px;
				left: 14px;
			}
		}

		.authorInfo2 {
			padding: 0 20px 0 10px;
			width: 250px;
			.authorName {
				font-size: 16px;
				color: #333;
				margin-bottom: 2px;
			}
			.authorIntro {
				font-size: 12px;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;

				white-space: nowrap;
			}
			.subscribeCount {
				font-size: 12px;
				color: #bbb;
				padding-top: 5px;
			}
		}
		.works {
			padding: 28px 10px 0 0;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.work {
				position: relative;
				.wokrsInfo {
					font-size: 13px;
					color: #333;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					margin: 0 0 11px;
					width: 90px;
				}
				.video {
					font-size: 12px;
					color: #fff;
					position: absolute;
					top: 70px;
					left: 3px;
					padding: 2px;
				}
			}
		}
		.authorInfo3 {
			color: #f86442;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.addtext {
				font-size: 12px;
			}
		}
		// 主播作品
		.works {
			padding: 28px 10px 0 0;
			display: flex;
			justify-content: space-between;
			.work {
				position: relative;
				.wokrsInfo {
					font-size: 13px;
					color: #333;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					margin: 0 0 11px;
					width: 90px;
				}
				.video {
					font-size: 12px;
					color: #fff;
					position: absolute;
					top: 70px;
					left: 3px;
					padding: 2px;
				}
			}
		}
	}
</style>
